<template>
	<view>
		<view class="topView">
			<view class="textareaView">
				<textarea v-model="content" maxlength="300"  placeholder="请填写您要反馈的内容，我们会尽快为您回复（必填）" />
			</view>
			<!-- <view class="count flex-row-flex-end">
				{{content.length}}/300
				
			</view> -->
			<view class="" style="margin: 30rpx;">
				<u-upload
				  ref="uUpload" 
				  width="162"
				  height="162"
				  :auto-upload="false"
				  :custom-btn="true"
				  :border-bottom="false"
				  :show-progress="false"
				  @on-remove="handlePictureRemove"
				  @on-choose-complete="handlePictureUpload"
				>
				    <view slot="addBtn" class="upload">
				      <image src="/static/images/uploader_icon.png" mode="aspectFit"></image>
				       
				    </view>
				</u-upload>
			</view>
			
		</view>
		<view class="footer fixed-bottom">
			<view @click="bottomButtonClick()" class="bottomButton flex-column-center">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	
	
	 import { uploadFile } from '@/utils/tools.js';
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
			
				pictures:[],
				content:'',

			}
		},
		onShow() {

		},
		onLoad(e) {

		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},

		methods: {
			bottomButtonClick(){
				uni.navigateBack()
			},
			// 图片上传
			handlePictureUpload(lists, index) {
				console.log(lists);
			    uni.showLoading({
			      title: '正在上传中...',
			      mask: true
			    });
			    
			    const len = lists.length;
				const count = this.pictures.length;
			    for (let i = count; i < len; ++i) {
			        const file = {...lists[i]};
			
					try{
						uploadFile(file.url).then(res => {
							uni.hideLoading();
							this.pictures.push(res.url);
						}).catch(err => {
							uni.hideLoading();
							this.$toast(err.msg || "上传失败");
						});
					}catch(e){
						uni.hideLoading();
						this.$toast({ title: "上传失败" });
					}
			    }
			},
			
			// 图片删除
			handlePictureRemove(index, lists, name) {
			    this.pictures.splice(index, 1);
			},
			
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
.topView{
	padding-bottom: 1rpx;
	margin-top: 20rpx;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}
.textareaView{
	margin: 0 30rpx;
	padding-top: 30rpx;
	height: 248rpx;
	font-size: 27rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	textarea{
		font-size: 27rpx;
		width: 100%;
		height: 100%;
	}

}
.count{
	margin-top: 20rpx;
	margin-right: 30rpx;
	font-size: 27rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #AAAAAA;
}
.upload{
	width: 143rpx;
	height: 143rpx;
	image{
		width: 100%;
		height: 100%;
	}
}

</style>